<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
    <link rel='shortcut icon' type='image/x-icon' href='img/klipse.png' />
    <link rel="stylesheet" type="text/css" href="css/codemirror.css">
    <link rel="stylesheet" type="text/css" href="https://viebel.github.io/klipse/examples/main.css">
    <style>
     .klipse-container:not(:empty):before {
       content: "**** Rendered Component ****";
       font-weight: bold;
       font-family: monospace;
     }

     .klipse-container:not(:empty) {
       background-color: #f7ebc6;
       border-left: 5px solid #f7d87c;
       display: block;
       margin-left: -14px;
       margin-right: -14px;
       padding-left: 9px;
       padding-bottom: 10px;
       margin-bottom: 30px;
     }
    </style>
  </head>
  <body>
    <p>
      <h1> Clojure evaluation</h1>
      <h2> Dealing with errors </h2>
      When there is an error, it should be displayed
      <pre>
	      <code class="clojure">
	  (range

        </code></pre>
      <h2> Empty input </h2>
      <p> When input is empty the output should be empty </p>
      <pre>
	      <code class="clojure">
        </code></pre>
      <h2> Containers </h2>
      Each snippet has a container near it that is accessible with `js/klipse-container`:

      <pre><code class="clojure">
	  (require 'goog.dom)
	  (goog.dom/setTextContent js/klipse-container "hello")
	  [1 2 3]
      </code></pre>
      <h2> Dealing with namespaces </h2>
      <p> When a namespace is defined, subsequent snippets must be evaluated in the same namespace </p>
      <pre><code class="clojure">
	(ns my.ns)
	(defn my-func [x] (* x x))
	(ns-name *ns*)
      </code></pre>
      <pre><code class="clojure">
	(ns-name *ns*)
      </code></pre>
      <pre><code class="clojure">
	(ns my.ns)
	(my-func 19)
      </code></pre>
      <h2>Implicit Macro Loading </h2>
      <p> <code>klipse-test.b</code> uses macro <code>x</code> from <code>klipse-test.a</code> without explicitly using <code>refer-macros</code></p>
      <p> This should evaluate to <code>10</code></p>
      <pre><code class="clojure" data-external-libs="https://raw.githubusercontent.com/viebel/klipse-test/master/src">
	(ns my.foo
	(:require [klipse-test.b]))

	klipse-test.b/asdf
      </code></pre>
      <h2> Printing </h2>

      <p>When calling `print`, the result should be appended to the result cell</p>
      <pre><code class="clojure">
	(println "abc")
	(println "def")
	(+ 1 2)
      </code></pre>
      <h2> Dealing with infinite loops </h2>
      <p> Infinite loops in user code are stopped after 1 second</p>
      <p> Currently it is broken </p>
      <pre><code class="clojure">
	#_(loop []
	(recur))
      </code></pre>

      <p> This is done by inserting <code>guard()</code> in each <code>if</code> and <code>recur</code>. You can see it by setting <code>data-compile-display-guard="true"</code>.</p>
      <pre><code class="clojure-js" data-compile-display-guard="true">
	(loop [x 1]
	(if (not= x 19)
        (recur x)
        (str "hello" 199)))
      </code></pre>

      <p> But by default, the transpiled js is not altered </p>

      <pre><code class="clojure-js">
	(loop [x 1]
	(if (not= x 19)
        (recur x)
        (str "hello" 199)))
      </code></pre>


      <h2> Dealing with infinite sequences </h2>
      <p>Sequences are cropped. At most we print 1000 elements.<br>
        This number is configurable at the snippet level. E.g. data-print-length="5"
      </p>
      <code class="clojure" data-print-length="5">
      (range)
      </code>

      <h2> Sharing Data between snippets </h2>
      <pre><code class="clojure">
	(def xyz 1)
      </code></pre>
      <pre><code class="clojure">
	(+ xyz 1)
      </code></pre>

      <h2> Sharing Code between snippets </h2>
      <pre><code class="clojure">
(defn mea [] 1)
      </code></pre>
      <pre><code class="clojure">
(mea)
      </code></pre>
      <h2> Simple stuff</h2>
      <div class="clojure">(map inc [1 2 3])</div>
      <br/>
      <span class="clojure"> (defn foo [x] (* x x)) </span>
      <br/>
      <span class="clojure"> (foo 19) </span>
      <br/>
      <p>
        Strings should be evaluated to their value - with the quote.
      </p>
      <span class="clojure">(str "abc")</span>
      <br/>
      <p>
        Output should be pretty printed
      </p>
      <span class="clojure">
        {:next-action :lifecycle/start-task?, :tasks {:in {:inbox []}, :inc {:inbox []}, :out {:inbox [], :outputs [{:n 42} {:n 85}]}}}
      </span>



      <p>
        Functions should be evaluated to their code.
      </p>
      <span class="clojure">(defn foo [])
        foo</span>

      <p>
        Variables should be evaluated to their names.
      </p>
      <span class="clojure">(def my-var "cool")</span>
      <div class="clojure">(if 1 2 3)</div>
      <div class="clojure">(if 1 2 3)</div>

      <p>
        Strings should be evaluated to their value - with the quote.
      </p>
      <div class="clojure">"abc"</div>
      <h2> Loading code from a gist </h2>
      <div class="clojure" data-loop-msec="3000" data-gist-id="viebel/08a311453c9d31378b357ced54221fb4"></div>
      <p> The below div should be colorized every 3 seconds</p>
      <div id="klipse-color" style="width:100px; height: 50px; background-color: black;"></div>
      <h2> Requiring a namespace </h2>

      <h3>clojure.string</h3>
      <span class="clojure">(ns my.ns
        (:require
        [clojure.string :as string]))
        (string/blank? "HELLO!!")</span>
      <br/>
      <pre><code class="clojure" data-external-libs="https://raw.githubusercontent.com/viebel/original-lisp/64fcf67146c3af9d7d136ea50c886d87ba32ce28/src/">
	(require '[original-lisp.core :as lisp :refer [l-eval]])
	(l-eval '((lambda (x y) (cons x (cdr y)))
	'a
	'(b c d))
        '())
      </code></pre>
      <h2> Requiring a namespace  using :rename</h2>
      <span class="clojure">(ns my.ns
        (:require
        [clojure.string :as string]
        [clojure.set :refer [union intersection] :rename {union UNION}]))
        [(intersection #{1 2 3} #{2 3 4})
        (UNION #{1 2 3} #{2 3 4 5})]</span>
      <br/>


      <br/>
      <h2> Requiring a cljsjs namespace </h2>
      <span class="clojure">
        (require 'cljsjs.moment)
        (some? js/moment)
      </span>
        <br/>

        (ns my.ns
        (:require
        [clojure.string :as string]
        [clojure.set :refer [union intersection] :rename {union UNION}]))        [(intersection #{1 2 3} #{2 3 4})
        (UNION #{1 2 3} #{2 3 4 5})]
      </span>
      <br/>

<h2> Requiring a goog namespace </h2>
      <span class="clojure">(ns my.gg
        (:require [goog.string :as gstring]))

        (gstring/capitalize "hello")</span>


      <h2> Defining a macro </h2>
      <div class="clojure">(ns my.hello$macros) (defmacro hello [x] `(inc ~x)) (my.hello/hello 13)</div> <br/>

      <h1> ClojureScript transpilation </h1>
      <div class="clojure-js">(map inc [100000 2 3])</div>
      <h2> data-static-fns=true </h2>
      <div class="clojure-js" data-static-fns="true">(map inc [100000 2 3])</div>

      <h2> data-preamble </h2>

      <p>This snippet prepends <code>(def preamble-var 2)</code> to its cljs source code.</p>

      <div class="clojure" data-preamble="(def preamble-var 2)">(= (+ preamble-var 3) 5)</div>
      <h2> Remove comments (only in clojure)</h2>
      <p>Comments at the end of the snippet should be removed </p>

      <div class="clojure">
        ; intro
        (map inc [1 2 3])
        ; you shouldn't see this comment
        ; you shouldn't see this comment
        ; you shouldn't see this comment

      </div>
      <h1> Styling </h1>
      <p> Leading and trailing blank lines should be removed. </p>
      <p>Other empty lines should be kept.</p>
      <pre>
        <code class="clojure">

	(defn foo

	([] "aa")



	([x] x))

        </code></pre>

      <h1> Reagent</h1>
      <pre>
        <code class="clj">
	(require '[reagent.core :as r])

	(defn child [name]
	[:p "Hi, I am " name])

	(defn childcaller []
	[child "Foo Bar"])
        </code></pre>

      <pre><code class="reagent">
	[child "Foo Bar"]
      </code></pre>

      <h1>Hiccup</h1>
      <div class="clojure">
        (require 'hoquet.runtime)
      </div>

      <h2> Hiccup to HTML </h2>
      <div class="transpile-hiccup">
        [:div [:h2 "hello"]
        [:p "you are "]
        [:ul (for [i [1 2 3]]
        [:li i])]]
      </div>

      <h2> Hiccup Rendering </h2>
      <div class="render-hiccup">
        [:div [:h2 "hello"]
        [:p "you are "]
        [:ul (for [i [1 2 3]]
        [:li i])]]
      </div>

      <script>
       window.klipse_settings = {
         codemirror_options_in: {
           lineWrapping: true,
           autoCloseBrackets: true
         },
         codemirror_options_out: {
           lineWrapping: true
         },
         selector: '.clojure,.clj',
         selector_js: '.clojure-js',
         selector_render_hiccup: '.render-hiccup',
         selector_transpile_hiccup: '.transpile-hiccup',
         selector_reagent: '.reagent',
       };
      </script>
      <script src="plugin/js/klipse_plugin.js"></script>
  </body>
</html>
